<template>
  <div class="order-container">
    <van-nav-bar title="我的订单" />
    <div class="item">
      <div class="container" style="width: 90%; height: 100%; margin: auto">
        <div class="up" style="overflow: hidden">
          <span style="font-size: 16px">沃尔玛</span>
          <span style="font-size: 14px; color: #999999">已取消</span>
        </div>
        <div class="down">
          <a>
            <van-image
              round
              width="40px"
              height="40px"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <van-image
              round
              width="40px"
              height="40px"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <van-image
              round
              width="40px"
              height="40px"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <van-image
              round
              width="40px"
              height="40px"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </a>
          <div>
            <p>$66.69</p>
            <p>共6件</p>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container" style="width: 90%; height: 100%; margin: auto">
        <div class="up" style="overflow: hidden">
          <span style="font-size: 16px">沃尔玛</span>
          <span style="font-size: 14px; color: #999999">已取消</span>
        </div>
        <div class="down">
          <a>
            <van-image
              round
              width="40px"
              height="40px"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <van-image
              round
              width="40px"
              height="40px"
              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </a>
          <div>
            <p>$66.69</p>
            <p>共6件</p>
          </div>
        </div>
      </div>
    </div>
    <jd-footer></jd-footer>
  </div>
</template>

<script>
import JdFooter from "@/components/footer/Footer.vue";
export default {
  name: "order",
  components: { JdFooter },
};
</script>

<style lang="less" scoped>
.item {
  width: 339px;
  height: 110px;
  margin: auto;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 4px;
  border-radius: 4px;
  .container {
    width: 90%;
    height: 100%;
    margin: auto;
    .up {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30%;
    }
    .down {
      height: 70%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-image {
        margin-left: 8px;
      }
      .van-image:nth-child(1) {
        margin-left: 0;
      }
    }
  }
}
</style>